<template>
	<view class="container">
		<view class="subject">
			<view class="list-box">
				<template v-for="(item, index) in workList">
					<view class="list" v-if="item.state == 1">
						<img class="list-bg" :src="item.opcimg" alt="" />
						<view class="list-card">
							<view class="list-card-txt">
								<text class="opc-name">{{ item.opcName }}</text>
								<text class="title-sub">实操{{item.name}}练习</text>
							</view>
							<view class="list-card-button">
								<view class="button-l" @click="examBtn(item, 0)">试题练习 </view>
								<view class="button-r" @click="examBtn(item, 1)">模拟考试
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<m-tabbar v-if="!tabbar_show" name="new" ref="tabbar1" native :safeBottom="false" current="1"></m-tabbar>
		<m-tabbar v-else name="new" fixed fill ref="tabbar2" :tabbar="tabbar" :safeBottom="false"
			current="1"></m-tabbar>
	</view>
</template>

<script>
	import {
		formatDate
	} from '@/utils/index.js'
	import {
		getUserExam,
		getUserInfo
	} from '@/api/index.js'
	export default {
		data() {
			return {
				userInfoConfirm: 0, //个人信息  0无误  1有误
				infoValue: 0, //个人信息  0无误  1有误
				loading: false,
				readNotice: undefined, //考试须知   undefined 未勾选  '1' 已勾选
				range: [{
						'value': 0,
						'text': '个人信息无误'
					},
					{
						'value': 1,
						'text': '个人信息有误'
					}
				],
				userInfo: {},
				planId: '', //计划ID
				planName: '', // 工种名称
				workList: [{
						"opcName": "熔化焊接与热切割作业",
						"opc": "030201",
						"opcimg": "../../static/hgbj.png",
						"name": "科目一"
					},
					{
						"opcName": "熔化焊接与热切割作业",
						"opc": "030201",
						"opcimg": "../../static/hgbj.png",
						"name": "科目三"
					},
					{
						"opcName": "高处安装、维护、拆除作业",
						"opc": "030302",
						"opcimg": "../../static/gcbj.png",
						"name": "科目三"
					},
					{
						"opcName": "登高架设",
						"opc": "030301",
						"opcimg": "../../static/gcbj.png",
						"name": "科目三"
					},
					{
						"opcName": "低压电工作业",
						"opc": "030102",
						"opcimg": "../../static/diyabg.png",
						"name": "科目三"
					},
					{
						"opcName": "高压电工作业",
						"opc": "030101",
						"opcimg": "../../static/diyabg.png",
						"name": "科目三"
					}
				],
				otype: '',
				model: '',
				user_exam: {},
				type: '',
				img_list_bg: '',
				tabbar: {},
				tabbar_show: false,
			}
		},
		onLoad() {
			this.tabbar_show = uni.getStorageSync('tabbar_show')
			this.tabbar = uni.getStorageSync('tabbar')
		},
		onShow() {
			this.loadData().then(res => {
				this.tabbar_show = uni.getStorageSync('tabbar_show')
				if (!this.tabbar_show) {
					return uni.redirectTo({
						url: '/pages/index/index'
					});
				}
				this.tabbar = uni.getStorageSync('tabbar')
			})
		},
		methods: {
			handleUserInfo() {
				// this.$refs.userPopup.open()
			},
			outLogin() {
				uni.clearStorageSync()
				uni.showToast({
					title: '退出登陆',
					success: () => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				})
			},
			loadData() {
				return new Promise((resolve, reject) => {
					getUserInfo().then(res => {
						this.userInfo = res.data;
						uni.setStorageSync('tabbar_show', this.userInfo.userPlans.some(obj => obj['userSub'] == 1));
						uni.setStorageSync('userinfo', this.userInfo);
						this.workList = this.userInfo.userPlans.map(e => {
							return {
								...e,
								opcimg: this.opcimg(e.opc) || '../../static/hgbj.png',
								state: e.repart == 0 && e.userSub == 1 ? 1 : 0
							}
						});

						// this.workList = this.userInfo.userPlans.map(e => {  
						//     return {  
						//         ...e,  
						//         opcimg: this.opcimg(e.opc)  
						//     };  
						// });  
						// 如果需要在 Promise 完成时执行某些操作，可以在这里调用 resolve()  
						resolve();

						// 如果不需要在 Promise 完成时执行额外的操作，或者操作已完成，  
						// 则可以直接注释掉下面的 // this.$refs.userPopup.open();  
						// 如果需要在 Promise 完成时打开某个弹窗或其他UI元素，  
						// 可以在 resolve() 调用之前或之后执行相应的操作。  
						// 例如：  
						// this.$refs.userPopup.open();  
						// resolve();  

					}).catch(error => {
						// 处理错误情况  
						reject(error);
					});
				});
			},
			opcimg(val) {
				if (val == '030302') {
					return '../../static/gcbj.png'
				}
				if (val == '030101') {
					return '../../static/gybg.png'
				}
				if (val == '030201') {
					return '../../static/hgbj.png'
				}
				if (val == '030102') {
					return '../../static/diyabg.png'
				}
			},
			formatStr(val, i) {
				if (val.includes('熔化焊接与热切割作业')) {
					return i
				}
				if (val.includes('高处安装、维护、拆除作业')) {
					return i
				}
				if (val.includes('低压电工作业')) {
					return i
				}
				if (val.includes('高压电工作业')) {
					return i
				}
			},
			sub1Click(val) {
				// console.log(22);
				// uni.navigateTo({
				// 	url: ``,
				// 	success: res => {},
				// 	fail: () => {},
				// 	complete: () => {}
				// });
			},
			// 开始考试
			examBtn(item, val) {
				uni.setStorageSync('opc', item.opc)
				uni.setStorageSync('opp', item.opp)
				uni.setStorageSync('opcName', item.opcName)
				uni.navigateTo({
					url: item.name != '科目一' ? `../operation/operation?type=${val}` :
						`../subject1/subject1?type=${val}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		box-shadow: 0px -10rpx 16rpx -6rpx #2069c7;
		z-index: 2;
		background: linear-gradient(180deg, #4d8dec, rgba(104, 157, 234, 0));
	}

	.checklist-group {
		display: flex;
		justify-content: space-around !important;
	}

	.container {
		z-index: 2;

		.index-top {
			padding: 20rpx;
			display: flex;
			color: #fff;
			padding: 50rpx 20rpx 20rpx 20rpx;
			align-items: center;

			.avatar {
				width: 100rpx;
				height: 100rpx;

				.img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					object-fit: cover;
				}
			}

			.info {
				display: flex;
				flex-direction: column;
				flex: 1;
				font-size: 34rpx;
				padding-left: 30rpx;
				justify-content: space-around;
			}
		}
	}

	.subject {
		padding: 0 20rpx;
		z-index: 2;
		padding-top: 40rpx;
		padding-bottom: 100rpx;

		.list {
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;
			position: relative;

			.list-icon {
				font-size: 68rpx;
			}

			.list-bg {
				position: absolute;
				z-index: 1;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.list-card {
				flex: 1;
				z-index: 2;
				display: flex;
				flex-direction: column;

				.list-card-txt {
					font-size: 34rpx;
					padding-bottom: 60rpx;
					border-bottom: 2rpx dashed #858687;
					font-weight: bold;
					padding-top: 50rpx;
					padding-left: 45rpx;

					.title-sub {
						display: block;
						padding-top: 30rpx;
						font-size: 40rpx;
						color: #ff0e00;
					}
				}

				.list-card-button {
					margin-top: 20rpx;
					height: 85rpx;
					line-height: 85rpx;
					text-align: center;
					border-radius: 10rpx;
					flex: 1;
					display: flex;
					justify-content: space-between;
					color: #fff;
					position: relative;
					overflow: hidden;

					view {
						// transform: skew(20deg);
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						position: relative;
					}

					.button-l {
						&:before {
							position: absolute;
							top: 0rpx;
							left: 0;
							z-index: -1;
							content: '';
							// border-radius: 10rpx 0 0 10rpx;
							border-bottom: 85rpx solid #2386FFFF;
							border-left: 0rpx solid transparent;
							border-right: 40rpx solid transparent;
							width: 100%;
						}
					}

					.button-r {
						&:after {
							position: absolute;
							left: 5%;
							// translate-x: (50%);
							// translate
							transform: skew(25deg);
							content: '';
							width: 4rpx;
							height: 85rpx;
							background: #fff;
						}

						&:before {
							position: absolute;
							top: 0rpx;
							left: 0;
							z-index: -1;
							content: '';
							border-top: 85rpx solid #F67914FF;
							border-left: 40rpx solid transparent;
							border-right: 40rpx solid transparent;
							width: 100%;
						}
					}
				}
			}
		}
	}

	.notice-box {
		width: 600rpx;
		background: #fff;
		padding: 30rpx;
		border-radius: 10rpx;

		.icon-cuowu {
			font-size: 36rpx;
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			background: #ff2e6c;
			border-radius: 0px 10rpx 0px 24rpx;
			color: #fff;
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.notice-box-top {
			border: 2rpx solid #000;
		}

		.notice-box-title {
			display: block;
			background: #d0f0f9;
			padding: 10rpx;
			border-bottom: 1rpx solid #000;
			margin-bottom: 10rpx;
		}

		.notice-box-title-text {
			line-height: 40rpx;
			padding: 0 10rpx;
			display: block;
			font-size: 28rpx;
		}

		.read-notice {
			// display: flex;
			text-align: center;
			margin: 10rpx 0;
		}

		.userinfo {
			border: 2rpx solid #000;
			padding-bottom: 10rpx;
		}

		.userinfo-txt {
			font-size: 28rpx;
			margin-bottom: 20rpx;

			text {
				display: block;
				border-bottom: 1rpx solid #000;
			}

			.name {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

			}

			.sfzID {
				display: flex;
				flex-direction: column;
				flex: 1;
				border-left: 1rpx solid #000;
				border-right: 1rpx solid #000;

			}

			.userimg {
				display: flex;
				flex-direction: column;
				flex: 1;
				min-width: 65px;
				align-items: center;
				justify-content: center;
				// border-left: 1rpx solid #000;
			}
		}

		table {
			border: 1px solid #c9d5d5;

			td {
				border: 1px solid #c9d5d5;
			}
		}

		.bg1 {
			background-color: #fcfeff;
			max-width: 90px;
		}

		td {
			padding: 5rpx;
		}
	}

	.checkbox-ss {}

	.uni-data-checklist .checklist-group .checklist-box {
		margin: 5rpx 0 !important;
	}

	.notice-box {
		position: relative;
		// padding-bottom: 80rpx;
	}

	.begin-btn {
		height: 75rpx;
		line-height: 75rpx;
		font-size: 30rpx;
		// position: absolute;
		// width: 90%;
	}
</style>